<template>
  <div class="bg">
    <nav-com
      :title="$t('tuijianTitle')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <div class="titletop">
        <div class="shenqing">{{$t('shenqing')}}</div>
        <div class="switch">
<!--           :disabled="ishaveshiqi"-->
          <van-switch v-model="checked" @change="changenotice($event)" active-color="#00DEA1" inactive-color="#fafafa" />
        </div>
      </div>
      <div class="yongjin">
        <div class="yongjin-left">
          <div class="yongjin-title">{{$t('yongjin')}}</div>
          <div class="yongjin-money">
            {{ shiqimoney }}
          </div>
        </div>
        <div class="yongjin-right">
          <div class="yongjin-title">{{$t('shiqiceshu')}}</div>
          <div class="yongjin-money">
            {{ shiqinum }}
          </div>
        </div>
      </div>
      <div class="shenqingcontent">
        <div class="qixing-top">
          <div class="qixing-top-item" :class="ischoose==0?'actives':''" @click="chooseindex(0)">{{$t('shenqing')}}</div>
          <div class="qixing-top-item" :class="ischoose==1?'actives':''" @click="chooseindex(1)">{{$t('shiqizhong')}}</div>
          <div class="qixing-top-item" :class="ischoose==3?'actives':''" @click="chooseindex(3)">{{$t('yishiqi')}}</div>
        </div>
        <div class="qixing-contents">
          <div class="qixing-item">
            <van-cell-group inset class="m-b-10 m-t-15 m-l-0 m-r-0" v-for="(item,index) in tryride" :key="index">
              <div class="group-item">
                <div class="group-item-top">
                  <div class="group-item-left">
                    <div><img style="border-radius: 50%" :src="item.avatar?item.avatar:require('../../assets/drive/touxiang@2x.png')" alt=""></div>
                    <div class="management_name">{{ item.nickname?item.nickname:'开心一刻' }}</div>
                  </div>
                  <div class="group-item-right" v-if="ischoose!=0"><span style="color:#0AD39F">{{ ischoose==1?$t('shiqizhong'):item.status==3?$t('shiqijieshu'):'' }}</span></div>
                </div>
                <div class="group-item-content">
                  <div class="group-item-content-all">
                    <div class="biaoti"><img src="../../assets/drive/sex@2x.png" alt="" class="icons"> {{ $t('sex') }}</div>
                    <div class="neirong">{{ item.gender }}</div>
                  </div>
                  <div class="group-item-content-all">
                    <div class="biaoti"><img src="../../assets/drive/address@2x.png" alt="" class="icons icons-add"> {{ $t('laizi') }}</div>
                    <div class="neirong">{{ item.region }}</div>
                  </div>
                  <div class="group-item-content-all">
                    <div class="biaoti"><img src="../../assets/drive/phone@2x.png" alt="" class="icons"> {{ $t('phone') }}</div>
                    <div class="neirong">{{ (item.applystatus=='1'&&item.tostatus=='1')? item.mobile:'--' }}</div>
                  </div>
                  <div class="group-item-content-all">
                    <div class="biaoti"><img src="../../assets/drive/riqi@2x.png" alt="" class="icons"> {{ $t('riqi') }}</div>
                    <div class="neirong">{{ item.createtime}}</div>
                  </div>
                  <div class="group-item-content-all" style="margin-bottom: 15px">
                    <div class="biaoti"><img src="../../assets/drive/address@2x.png" alt="" class="icons icons-add"> {{ $t('dizhi') }}</div>
                    <div class="neirong">{{ item.address }}</div>
                  </div>

<!--                  按钮-->
                  <div  class='fatSubmit' v-if="ischoose=='2'">
                  </div>
                  <div  class='fatSubmit' v-if="ischoose=='1'">
<!--                    cstatus=0显示接受和取消按钮 -->
<!--                    cstatus=1和status=0显示等待接受 -->
<!--                    cstatus=1和status=1显示取消按钮-->
<!--                    status=1和isend=1显示确认结束-->
                    <van-button round type="info" v-if="item.isend=='1'&&item.cstatus=='1'" class="fatSubmit_yanse" block @click="bickjieshu(item.id)">{{$t('querenjieshu')}}</van-button>
                    <van-button round type="info" v-if="item.status=='0'&&item.cstatus=='1'" class="fatSubmit_yanse" block @click="bickjieshu(item.id)">{{$t('querenjieshu')}}</van-button>
                    <van-button type="info" v-if="item.status=='1'&&item.cstatus=='1'&&item.isend=='0'" class="fatSubmit_yansequxiaos" block @click="bickjujue(item.id)">{{ $t('quxiao')}}</van-button>
                  </div>
                  <div  class='fatSubmit' v-if="ischoose=='0'">
                    <van-button type="info" v-if="item.cstatus!='1'" class="fatSubmit_yansequxiao" block @click="bickjujue(item.id)">{{ $t('jujue') }}</van-button>
                    <van-button type="info" v-if="item.cstatus=='1'" class="fatSubmit_yanse" block>{{ $t('jieshouzhong')}}</van-button>
                    <van-button type="info" v-if="item.cstatus=='0'" class="fatSubmit_yanse" block @click="bickjieshou(item.id)">{{ $t('jieshou')}}</van-button>
                  </div>
                </div>
              </div>
            </van-cell-group>
          </div>
        </div>
      </div>
      <van-action-sheet v-model="show" :title="$t('qixingxieyi')" :closeable="false" :close-on-click-overlay="false">
        <div class="ql-container ql-snow qixingxieyi">
          <div class="ql-editor" v-html="shiqicontents"></div>
        </div>
        <div class="footer">
          <van-button round type="info" class="fatSubmit_yanse" block @click="show=false;checked=true;shiqi='1';changeshiqi()">{{$t('tongyi')}}</van-button>
          <p class="butongyi" @click="show=false;checked=false;shiqi='0';changeshiqi()">{{$t('butonyi')}}</p>
        </div>
      </van-action-sheet>
    </div>
    <!--      评价-->
    <van-popup
      round
      v-model="pingjiamodel"
      position="center"
      :style="{ height: '40%' }"
    >
      <div class="rili-content">
        <van-row  class="m-b-10 m-t-10 topContent">
          <van-col span="24" class="fontStyle">{{ $t('pingjiatitle') }}</van-col>
        </van-row>
        <van-cell-group inset class="m-b-10">
          <van-field
            class="pingjiacontent"
            type="textarea"
            v-model="pingjiawords"
            :placeholder="$t('pingjiaplace')"
            input-align="left"
          />
        </van-cell-group>
        <div class='pingjiabtns'>
          <div @click="submitpingjia()">{{ $t('pingjiabtn') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import { profile, userInfo } from '../../api/user'
import {
  acceptTryride,
  endTryride,
  refusedTryride,
  toTryride,
  tryrideAgreement,
  tryrideEvaluation
} from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom
  },
  data () {
    return {
      shiqicontents:'',
      pingjiamodel: false,
      pingjiawords: '',
      checked: '',
      shiqi: '',
      shiqiid: '',
      showView: true,
      showPage: true,
      lichengValue: '',
      bickname: '',
      bickdata: {},
      show: false,
      ischoose: 0,
      shiqimoney: '',
      shiqinum: '',
      tryride: [],
      useravtar: '',
      username: '',
      userinfo: {},
      issqr:'',
      ishaveshiqi:false
    }
  },
  mounted () {
    this.getuserinfo()
    this.init()
  },
  methods: {
    getuserinfo () {
      userInfo().then((res) => {
        if (res.code == 1) {
          this.shiqi = res.data.userinfo.tryride
          if (res.data.userinfo.tryride == '1') {
            this.checked = true
          } else if (res.data.userinfo.tryride == '0') {
            this.checked = false
          }
        }
      })
      tryrideAgreement().then((res) => {
        if (res.code == 1) {
         this.shiqicontents = res.data.str
        }
      })
    },
    changeshiqi () {
      profile({ tryride: this.shiqi }).then((res) => {
        if (res.code == 1) {
          const nav = navigator.userAgent
          if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
            phone.userInfoEdit()
          } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            setTimeout(() => {
              this.$bridge.callhandler('userInfoEdit', {}, res => {})
            })
          }
        }
      })
    },
    submitpingjia () {
      tryrideEvaluation({ id: this.shiqiid, str: this.pingjiawords }).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
          this.shiqiid = ''
          this.pingjiawords = ''
          this.getUserData()
          this.pingjiamodel = false
        }
      })
    },
    zhuanhuansex () {
      switch (this.userinfo.gender) {
        case 1:
          console.log('=== this.shareUser.genders', this.userinfo.genders)
          if (this.$i18n.locale == 'zh') {
            this.userinfo.genders = '男'
          } else {
            this.userinfo.genders = 'man'
          }
          break
        case 0:
          if (this.$i18n.locale == 'zh') {
            this.userinfo.genders = '女'
          } else {
            this.userinfo.genders = 'girl'
          }
          break
        case 2 :
          if (this.$i18n.locale == 'zh') {
            this.userinfo.genders = '其他'
          } else {
            this.userinfo.genders = 'orther'
          }
          break
      }
    },
    bickjieshou (id) {
      acceptTryride(id).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
          this.getUserData()
        }
      })
    },
    bickjujue (id) {
      refusedTryride(id).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
          this.getUserData()
        }
      })
    },
    bickjieshu (id) {
      endTryride(id).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
          this.getUserData()
          this.shiqiid = id
          if(this.issqr=='1'){
            this.pingjiamodel = true
          }
        }
      })
    },
    chooseindex (index) {
      this.ischoose = index
      this.tryride = []
      this.getUserData()
    },
    changenotice (e) {
      console.log('=======333', e)
      if (e) {
        this.show = true
      } else {
        this.show = false
        this.shiqi = '0'
        this.changeshiqi()
      }
    },
    jumpTo (url, canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {})
      } else {
        this.$router.go(-1)
      }
    },
    // 初始化
    init () {
      this.getUserData()
    },
    // 用户信息
    getUserData () {
      toTryride(this.ischoose).then((res) => {
        if (res.code == 1) {
          if(this.ischoose == '0'){
            if(res.data.tryride.length>0){
              this.ishaveshiqi = true
            }else{
              this.ishaveshiqi = false
            }
          }
          this.shiqimoney = res.data.commission
          this.shiqinum = res.data.num
          this.tryride = res.data.tryride
          this.useravtar = res.data.user.avatar
          this.userinfo = res.data.user
          this.username = res.data.user.username
          this.issqr = res.data.issqr
          this.zhuanhuansex()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bg{
  background: #fff;
}
.top-view1{
  margin-top: 23.23vw;
  padding:20px ;
  .titletop{
    display: flex;
    width: 100%;
    justify-content: space-between;
    .shenqing{
      font-size: 22px;
      font-weight: bold;
      color: #333333;
    }
  }
  .yongjin{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 15px 0px;
    border-right: 10px;
    background: #fafafa;
    .yongjin-left{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #ccc;
      .yongjin-title{
        font-size: 18px;
        color: #ccc;
        margin-bottom: 10px;
      }
      .yongjin-money{
        font-size: 22px;
        color:#333;
        font-weight: bold;
      }
    }
    .yongjin-right{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .yongjin-title{
        width: 80%;
        font-size: 18px;
        color: #ccc;
        margin-bottom: 10px;
        text-overflow: ellipsis; //文本超出块元素时以省略号的形式显示
        overflow: hidden;
        white-space: nowrap; //规定段落中的文本不进行换行
      }
      .yongjin-money{
        font-size: 22px;
        color:#333;
        font-weight: bold;
      }
    }
  }
  .shenqingcontent{
    width: 100%;
    .qixing-top{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      height: 30px;
      .qixing-top-item{
        position: relative;
        height: 100%;
        font-size: 18px;
        &::after{
          content: '';
          position: absolute;
          bottom: 0px;
          left: 25%;
          width: 24px;
          height: 3px;
        }
      }
      .actives{
        color: #0AD39F;
        &::after{
          background: #0AD39F;
        }
      }
    }

  }
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 15px;
}
.m-l-0{
  margin-left: 0!important;
}
.m-r-0{
  margin-right: 0!important;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fafafa;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    .group-item-left{
      flex: 2;
      display: flex;
      align-items: center;
      img{
        width: 56px;
        margin-right: 20px;
      }
      .management_name{
        width: 70%;
        font-size: 22px;
        font-family: Helvetica;
        color: #303030;
        text-overflow: ellipsis; //文本超出块元素时以省略号的形式显示
        overflow: hidden;
        white-space: nowrap; //规定段落中的文本不进行换行
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      span{
        height: 35px;
        font-size: 14px;
      }
    }
  }
  .group-item-content{
    display: flex;
    flex-direction: column;
    align-items: center;

    .group-item-content-all{
      width:100%;
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
      &:first-child{
        margin-top: 10px;
      }
      .biaoti{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
        margin-right: 10px;
        display: flex;
        align-items: center;
        min-width: 28%;
        .icons{
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        .icons-add{
          width: 19px;
          height: 22px;
        }
      }
      .neirong{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
      img{
        width: 100%;
      }
    }
    .fatSubmit{
      padding: 0.3rem 0.42667rem 10px;
      width: 100%;
      .fatSubmit_yanse{
        font-size: 16px;
        font-weight: bold;
        border: 0px!important;
        background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
        box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
      }
      .fatSubmit_yansequxiao{
        font-size: 18px!important;
        font-weight: 600;
        font-weight: bold;
        margin-right: 20px;
        border: 0px!important;
        background: linear-gradient(90deg, #0ad39f4d 0%, #0ad39f4d 100%);
        box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
        color: #333333;
      }
      .fatSubmit_yansequxiaos{
        font-size: 18px!important;
        font-weight: 600;
        border: 0px!important;
        background: linear-gradient(90deg, #0ad39f4d 0%, #0ad39f4d 100%);
        box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
        color: #333333;
      }
    }
  }
}
.fatSubmit{
  padding: 0.3rem 0.42667rem 10px;
  display: flex;
  justify-content: space-between;
  .fatSubmit_yanse1{
    margin-top: 20px;
    width: 48%;
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
    font-weight: 600;
  }

}
.fontStyle{
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color:#303030;
  text-align: center;
}
.qixingxieyi{
  padding: 15px;
  height: 200px;
  overflow-y: scroll;
}
.van-action-sheet__header{
  font-weight: bold;
  font-size: 22px;
}
.footer{
  padding: 15px;
  .fatSubmit_yanse{
    font-size: 18px!important;
    font-weight: 600;
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
  }
  .butongyi{
    font-size: 16px;
    font-weight: bold;
    color: #cccccc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    margin-bottom: 0;
  }
}
.rili-content{
  width: 90vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .fontStyle{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color:#303030;
    text-align: center;
  }
  .pingjiacontent{
    border: 1px solid #E5E5E5;
    background:#FBFBFB ;
    height: 160px;
    margin-top: 10px;
  }
  .pingjiabtns{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    color: #0AD39F;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0AD39F;
    line-height: 25px;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
}
.ql-editor span{
  white-space: inherit!important;
}
</style>
